/**
 * 数据管理=>表码查询
 */
import * as React from "react";
import {Button, Upload, Modal, message, Table} from "antd";
import IconFont from "../../../../assets/ICON";
import CodeCondition, {CodeConditionParam} from "./compontents/Condition";
import DataCodeTable from "./compontents/Table"
import {exportFile, getUserInfo, importFile} from "../../../../utils/common";
import "./index.less";
import {downLoadCodeTemplateUrl, exportCodeUrl, importCodeUrl} from "./compontents/serverApi";

export interface DataCodeProps {}

export interface DataCodeState {}

class DataCode extends React.Component<DataCodeProps, DataCodeState> {
    private paramJson: CodeConditionParam = {
        energyType: 1,
        likeStr: "",
        timeType: 2,
        startTime: 0,
        endTime: 0
    };
    state = {resultVisible: false};
    private importResult: [] = [];
    private importColumns: any[] = [
        {
            title: "设备名称",
            dataIndex: "deviceName",
            key: "deviceName",
        },{
            title: "设备地址",
            dataIndex: "deviceAddress",
            key: "deviceAddress",
        },{
            title: "日期类型",
            dataIndex: "dateTypeStr",
            key: "dateTypeStr",
        },{
            title: "冻结时间",
            dataIndex: "dataTimeStr",
            key: "dataTimeStr",
        },{
            title: "失败原因",
            dataIndex: "msg",
            key: "msg",
            render: (value) => <span style={{ color: 'red' }}>{value}</span>
        }
    ];
    render() {
        return (
            <div className="dataCode">
                <CodeCondition
                    onChange={(paramJson: CodeConditionParam) => {
                        this.paramJson = paramJson;
                    }}
                    query={(paramJson: CodeConditionParam) => {
                        this.query(paramJson);
                    }}
                />
                <div className="subject">
                    <div className="operation">
                        <Button type="primary" className="export" size="middle"
                                icon={<IconFont type="icon_xiazai"/>}
                                onClick={()=>{this.downTemplate();}}>
                            模板下载
                        </Button>
                        <Button type="primary" className="export" size="middle"
                                icon={<IconFont type="icon_daochu"/>}
                                onClick={()=>{this.exportDeviceCode();}}
                        >
                            导出
                        </Button>
                        <Upload accept='.xlsx' showUploadList={false}
                                beforeUpload={file => {
                                    const formData = new FormData();
                                    formData.append('file', file);
                                    formData.append('energyType', this.paramJson.energyType.toLocaleString());
                                    formData.append('peId', getUserInfo('peId'));
                                    importFile(importCodeUrl, formData, this, result => {
                                        if (result.success) {
                                            if(result.data && result.data.length>0){
                                                this.importResult = result.data;
                                                this.setState({resultVisible: true});
                                            }else {
                                                this.setState({resultVisible: false});
                                            }
                                        }
                                    }, err => {
                                        this.setState({resultVisible: false});
                                    });
                                    return false;
                                }}
                        >
                            <Button type="primary" className="export" size="middle"
                                    icon={<IconFont type="icon_daochu" />}>
                                导入
                            </Button>
                        </Upload>
                    </div>
                    <DataCodeTable paramJson={this.paramJson}/>
                </div>
                {/*---导入结果窗口---*/}
                <Modal
                    title='导入失败结果'
                    width={1600}
                    centered={true}
                    visible={this.state.resultVisible}
                    okText={'确定'}
                    cancelText={'取消'}
                    maskClosable={false}
                    onCancel={() => {
                        this.setState({resultVisible: false});
                    }}
                    onOk={() => {
                        this.setState({resultVisible: false});
                    }}
                >
                    <Table
                        bordered={false}
                        rowKey={'id'}
                        columns={this.importColumns}
                        dataSource={this.importResult}
                        pagination={false}
                        style={{height:600,overflowY:'auto',width:'100%',backgroundColor: 'white'}}
                    />
                </Modal>
            </div>
        );
    }
    //查询
    query(paramJson: CodeConditionParam) {
        if (paramJson.startTime === 0 || paramJson.endTime === 0) {
            message.info("请选择时间！");
        } else {
            this.paramJson = paramJson;
            this.forceUpdate();
        }
    }
    //下载模板
    downTemplate() {
        let fileName = this.paramJson.energyType === 1 ? "电表表码模板.xlsx" : "水表表码模板.xlsx";
        let param = {energyType: this.paramJson.energyType};
        exportFile(downLoadCodeTemplateUrl, param, fileName);
    }
    //表码导出
    exportDeviceCode() {
        if (this.paramJson.startTime === 0 || this.paramJson.endTime === 0) {
            message.info("请选择时间！");
            return ;
        }
        let fileName = this.paramJson.energyType === 1 ? "电表表码.xlsx" : "水表表码.xlsx";
        exportFile(exportCodeUrl(this.paramJson), this.paramJson, fileName);
    }

}
export default DataCode;
